import React from "react";
// import { Button } from 'antd';
import "./Demo2.css"
import { Input } from 'antd';
import { Row, Col } from 'antd';
import { Drawer,message, Button, Radio,List, Typography } from 'antd';

class Demo2 extends React.PureComponent{

    constructor(props) {
        super(props);
        this.state={
            inputContent:"",
            visible:false,
            operationHistoryArr:[],
            lastResult:"",
        }
    }
    handleOperation=()=>{
        const {inputContent=""}=this.state;
        const resultArr=inputContent.split(" ");
        const optionArr=[];
        let lastData=0;
        for(let i=0;i<resultArr.length;i++){
            const currentData=resultArr[i];
            const nextData=resultArr[i+1];
            switch (currentData) {
                case "%":
                    lastData=optionArr.pop();
                    optionArr.push(lastData/100);
                case "+":
                    break;
                case "-":
                    if(nextData==""){
                        break;
                    }
                    optionArr.push(0-parseFloat(nextData));
                    i++;
                    break;
                case "*":
                    if(nextData==""){
                        break;
                    }
                    lastData=optionArr.pop();
                    optionArr.push(lastData*parseFloat(nextData));
                    i++;
                    break;
                case "/":
                    if(nextData=="0"){
                        message.error('除数不能为零');
                        break;
                    }
                    if(nextData==""){
                        break;
                    }
                    lastData=optionArr.pop();
                    optionArr.push(lastData/parseFloat(nextData));
                    i++;
                    break;
                case "":
                    break;
                default:
                    optionArr.push(parseFloat(currentData));
                    break;
            }
        }
        // console.log(optionArr);
        let sum=0;
        optionArr.forEach(function (v) {
            sum+=v;
        })
        sum=Math.round(sum*100)/100;
        // console.log(sum.toFixed(4));
        this.setState({
            inputContent:this.state.inputContent+"="+sum,
            lastResult:sum,
        },()=>{
            this.handleSaveDataToStorge()
        })

    }
    handleContentInput=(e)=>{
        let value;


        switch (e.target.innerText){
            case "+":
            case "-":
            case "*":
            case "/":
            case "%":
                value=this.state.inputContent+" "+e.target.innerText+" ";
                if (value.indexOf('=')!==-1){
                    value=this.state.lastResult+" "+e.target.innerText+" ";
                }
                break;
            case 'Back':
                value = this.state.inputContent.substring(0, this.state.inputContent.length - 1);
                break;
            default:
                value=this.state.inputContent+e.target.innerText;
                if (value.indexOf('=')!==-1){
                    value=this.state.lastResult+e.target.innerText;
                }
                break;
        }
        const arr=value.split(" ");
        // this.handleOperation();
        // console.log(arr);
        this.setState({
            inputContent:value,
        })
    }
    clean=()=>{
        this.setState({
            inputContent:"",
        })
    }

    onClose=()=>{
        this.setState({
            visible: false,
        });
    }
    showDrawer = () => {
        let historyArr = [];
        if (window.localStorage.getItem('history')) {
            historyArr = JSON.parse(window.localStorage.getItem('history'));
        }
        this.setState({
            visible: true,
            operationHistoryArr:historyArr,
        });
    };
    handleSaveDataToStorge = () => {
        const {inputContent} = this.state;
        let historyArr = [];
        if (window.localStorage.getItem('history')) {
            historyArr = JSON.parse(window.localStorage.getItem('history'));
        }
        //console.log(inputContent);
        const obj={
            time:this.handleDateTime(),
            Operation:inputContent,
        }
        historyArr.push(obj);
        this.setState({
            operationHistoryArr:historyArr,
        })
        console.log("historyArr:"+historyArr);
        const data = JSON.stringify(historyArr);
        window.localStorage.setItem('history', data);
    }

    handleDateTime=()=>{
        let nowDate=new Date();
        return nowDate.getHours()+":"+nowDate.getMinutes()+":"+nowDate.getSeconds()
        //console.log(nowDate.getHours()+":"+nowDate.getMinutes()+":"+nowDate.getSeconds());
    }

    render(){
        return(
            <>
                {/*居中*/}
                <div className="div_middle">
                    <div className="div_input">
                        <Input placeholder="0" className="input_number" value={this.state.inputContent}/>
                    </div>
                    <div className="div_btnRow">
                        <Row >
                            <Col span={6}>
                                <Button type="default" className="rowBtn" onClick={this.clean}>AC</Button>
                            </Col>

                            <Col span={6}>
                                <Button type="default" className="rowBtn" onClick={this.handleContentInput}>Back</Button>
                            </Col>

                            <Col span={6}>
                                <Button type="default" className="rowBtn" onClick={this.handleContentInput}>%</Button>
                            </Col>

                            <Col span={6}>
                                <Button type="default" className="rowBtn2" onClick={this.handleContentInput}>/</Button>
                            </Col>
                        </Row>
                    </div>
                    <div className="div_btnRow">
                        <Row >
                            <Col span={6}>
                                <Button type="default" className="rowBtn3" onClick={this.handleContentInput}>1</Button>
                            </Col>

                            <Col span={6}>
                                <Button type="default" className="rowBtn3" onClick={this.handleContentInput}>2</Button>
                            </Col>

                            <Col span={6}>
                                <Button type="default" className="rowBtn3" onClick={this.handleContentInput}>3</Button>
                            </Col>

                            <Col span={6}>
                                <Button type="default" className="rowBtn2" onClick={this.handleContentInput}>*</Button>
                            </Col>
                        </Row>
                    </div>
                    <div className="div_btnRow">
                        <Row >
                            <Col span={6}>
                                <Button type="default" className="rowBtn3" onClick={this.handleContentInput}>4</Button>
                            </Col>

                            <Col span={6}>
                                <Button type="default" className="rowBtn3" onClick={this.handleContentInput}>5</Button>
                            </Col>

                            <Col span={6}>
                                <Button type="default" className="rowBtn3" onClick={this.handleContentInput}>6</Button>
                            </Col>

                            <Col span={6}>
                                <Button type="default" className="rowBtn2" onClick={this.handleContentInput}>+</Button>
                            </Col>
                        </Row>
                    </div>
                    <div className="div_btnRow">
                        <Row >
                            <Col span={6}>
                                <Button type="default" className="rowBtn3" onClick={this.handleContentInput}>7</Button>
                            </Col>

                            <Col span={6}>
                                <Button type="default" className="rowBtn3" onClick={this.handleContentInput}>8</Button>
                            </Col>

                            <Col span={6}>
                                <Button type="default" className="rowBtn3" onClick={this.handleContentInput}>9</Button>
                            </Col>

                            <Col span={6}>
                                <Button type="default" className="rowBtn2" onClick={this.handleContentInput}>-</Button>
                            </Col>
                        </Row>
                    </div>
                    <div className="div_btnRow">
                        <Row >
                            <Col span={12}>
                                <Button type="default" className="rowBtn3" onClick={this.handleContentInput}>0</Button>
                            </Col>


                            <Col span={6}>
                                <Button type="default" className="rowBtn3" onClick={this.handleContentInput}>.</Button>
                            </Col>

                            <Col span={6}>
                                <Button type="default" className="rowBtn2" onClick={this.handleOperation}>=</Button>
                            </Col>
                        </Row>
                    </div>
                    <div className="div_btnRow">
                        <Row >
                            <Col span={24}>
                                <Button type="default" className="rowBtn4" onClick={this.showDrawer}>History</Button>
                            </Col>
                        </Row>
                    </div>

                </div>
                <Drawer
                    title="历史记录"
                    placement="bottom"
                    closable={true}
                    onClose={this.onClose}
                    visible={this.state.visible}
                >
                    <List
                        // header={<div>Header</div>}
                        // footer={<div>Footer</div>}
                        bordered
                        dataSource={this.state.operationHistoryArr}
                        renderItem={item => (
                            <List.Item>
                                [{item.time}]{item.Operation}
                            </List.Item>
                        )}
                    />
                </Drawer>
            </>
        )
    }
}

export default Demo2;